摘要
Day 9 我們學會了 Undo（回復上一筆刪除）。
但是隨著資料越存越多，清單會變得冗長，要找特定紀錄會很麻煩。
今天就要加上「排序」功能，讓使用者能快速找到需要的內容。

為什麼要排序？

• 資料越來越多：Undo、Delete、清空後還是會累積一堆紀錄。
• 使用者體驗：快速找到「最近的紀錄」或「某個原因的紀錄」。
• 程式學習：練習 array.sort()的應用。

核心概念

1. 使用者偏好：記住上次選的排序方式，存在 LocalStorage。
2. 渲染前套用：renderHistory() 內呼叫 applySort(records)。
3. 即時響應：監聽排序下拉選單的 change 事件，更新偏好後重新渲染。

實作步驟

假設你已具備 Day 5/6 的 readRecords()、writeRecords() 與 Day 7/9 的 renderHistory() 外框。以下片段著重新增／修改的排序邏輯。
HTML：

<h2>歷史回顧</h2>

<!-- 排序 -->
<label for="sortSelect">排序：</label>
<select id="sortSelect">
  <option value="time_desc">依建立時間（新→舊）</option>
  <option value="time_asc">依建立時間（舊→新）</option>
  <option value="reason">依原因</option>
  <option value="task">依任務字母／注音順序</option>
</select>

<ul id="historyList"></ul>

JavaScript：

// ===== 常數與兼容處理 =====
// 使用者偏好（排序）儲存 key
const SORT_PREF_KEY   = 'procrastinator_sort_pref';   // time_desc | time_asc | reason | task

// ===== 狀態 =====
// 初始偏好（若 UI 沒有下拉，仍可用預設）
let currentSort   = localStorage.getItem(SORT_PREF_KEY)   || 'time_desc';

// 排序輔助（若網頁上沒有這些元素，下面監聽會自動跳過）
const sortSelect   = document.getElementById('sortSelect');   // 期望值：time_desc | time_asc | reason | task

// 應用排序
function applySort(list) {
  let arr = Array.isArray(list) ? list.slice() : [];
  switch (currentSort) {
    case 'time_asc':
      arr.sort((a, b) => a.createdAt - b.createdAt);
      break;
    case 'task':
      arr.sort((a, b) => (a.task || '').localeCompare(b.task || '')); //不同瀏覽器/語系環境排序規則會不同
      break;
    case 'reason':
      arr.sort((a, b) => (a.reason || '').localeCompare(b.reason || ''));
      break;
    case 'time_desc':
    default:
      arr.sort((a, b) => b.createdAt - a.createdAt);
      break;
  }
  return arr;
}

// ===== 排序下拉事件 =====
sortSelect?.addEventListener('change', (e) => {
  currentSort = e.target.value || 'time_desc';
  localStorage.setItem(SORT_PREF_KEY, currentSort);
  renderHistory();
});

// ===== 初次載入 =====
(function initSortUI() {
  if (sortSelect) sortSelect.value = currentSort;
})();
renderHistory();

驗證

1. 即時更新：觀察新增資料後是否依照排序即時顯示。
2. 預設行為：初次載入應為「依建立時間（新→舊）」。
3. 切換排序：新增幾筆資料，切換「新→舊」「舊→新」「依原因」，順序應正確。
4. 偏好記住：切到「依任務字母／注音順序」，重新整理後仍維持同樣選項。